import React, { Component } from 'react'
import {AppProps} from './components/shoppmodel/Shoppingcar'
import ShoppingCar from './components/shoppingcar/ShoppingCar'
import Usercontorl from './components/usercontorl/Usercontorl'
import Page from './components/Page/Page'
import RouterView from './components/router/router'
interface Istate {
    list:Array<AppProps>
    clicklist:number,
    com:any
}
export default class App extends Component<any,Istate>{
        constructor(props:any){
            super(props);
            this.state={
                com:ShoppingCar,
                clicklist:1,
                list:[{id:1,msg:"购物车分离",com:ShoppingCar},
                {id:2,msg:"分页",com:Page},
                {id:3,msg:"用户管理",com:Usercontorl}]
            }
        }
        clicklists(item:any){
            this.setState({
                clicklist:item.id,
                com:item.com
            })
    }
  render() {
    // let View=this.state.com
    return (
      <React.Fragment>
       <div>
       <div>
        <a href='#/'>购物车</a>|
        <a href='#/page'>分页</a>|
        <a href='#/usercontorl'>用户管理</a>
        <a href='#/lianxi'>练习</a>
      </div>
        
       {/* <div className='box'>
       {this.state.list.map(item=>
       <div onClick={()=>{this.clicklists(item)}}
       className={item.id===this.state.clicklist?'list clicklist':'list'} 
       key={item.id}>{item.msg}
       </div>)} */}
     <RouterView></RouterView>
       </div>
       {/* <View></View> */}
       <div>
       </div>
      
       {/* </div> */}
      </React.Fragment>
    )
  }
}
// let a= ({flag,numinfo}:any)=>({
//   flag:flag.value,

// })
